<template>
	<view>
		<view class="px-4">
			<u-tabs :list="tabList" :activeStyle="{color: '#333333',transform: 'scale(1.05)'}"
				:inactiveStyle="{ color: '#999999',transform: 'scale(1)'}"
				itemStyle="width: 25%;height: 44px;align: center;padding-left: 0px; padding-right: 0px;"
				lineWidth="0" @click="(item)=>{
					dictType = item.val
					reloadData()
				}"></u-tabs>
		</view>
		<my-page ref="mypage" v-model="dataList" :height="system.screenHeight - system.statusBarHeight - 132" :contentClass="['px-2']" @load-data="loadData">
			<template slot="content">
				<view class="masonry">
					<view v-for="(item,index) in dataList" :key="index" class="item bg-white py-4 text-center rounded" :class="{'mt-2': index > 0}"
						@click="$util.myNavigateTo('/pages_home/lianmeng/product_detail?id=' + item.id)">
						<image :src="$util.formatImageIdUrl(item.cover)" class="w-2_3 max-h-32"></image>
						<view class="mt-4 mb-0_5 font-bold text-black-33 text-left pl-4 pr-2" v-text="item.name"></view>
						<view class="text-gray-99 text-sm text-left pl-4 pr-2" v-text="item.companyName"></view>
					</view>
				</view>
			</template>
		</my-page>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import MyPage from '@/components/my_page.vue'
	import * as systemApi from '@/interface/common/system.js'
	import * as unionApi from '@/interface/junchuang/union.js'
	export default {
		props: {
			companyId: {
				type: String,
				default: ''
			},
      codeType: {
				type: String,
				default: ''
			}
		},
		components: {
			MyPage
		},
		data() {
			return {
				tabList: [
					{name: '全部', val: '-1'},
				],
				dictType: '-1',
				dataList: [],
				data: {pageTotal: 0},
			}
		},
		computed: {
			...mapState({
				system: state => state.system
			})
		},
		onReady() {
			const v = this
			systemApi.getDictList('jc_company_product_type').then(({ data }) => {
				data.forEach(item=>{
					v.tabList.push({
						name: item.dictLabel,
						val: item.dictValue
					})
				})
			})
		},
		methods: {
			loadData(page, success, error){
				const v = this;
				Object.assign(v.data, page, {
					companyId: v.companyId,
          type: v.codeType,
					classify: v.dictType == '-1'? '':v.dictType
				})
				unionApi.getCompanyProductPageList(v.data).then(res=>{
					v.data.pageTotal = res.data.total || 0
					success(res)
				}).catch(error)
			},
			reloadData() {
				this.$refs['mypage'].dataReload()
			}
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}

	.masonry {
		column-count: 2;
		column-gap: 0.5rem;
	}

	.item {
		break-inside: avoid;
		box-sizing: border-box;
	}
</style>
